<!--首页布局-->
<template>
  <div class="HomeContainer">
    <el-container style="height:100%;">
      <el-header>
        <commonHeader></commonHeader>
      </el-header>
      <el-container style=" margin-top: 15px;">
        <el-aside width="120px" style="height: calc(100vh - 125px);">
            <div class="react">
          <el-scrollbar style="height: 100%;">
           
            <operatorSider></operatorSider>
          
          </el-scrollbar>
             </div>
        </el-aside>
        <el-main style="height: calc(100vh - 125px);">
         
            <div class="content">
              <transition name="move" mode="out-in">
                <keep-alive :include="tagsList">
                  <router-view></router-view>
                </keep-alive>
              </transition>
            </div>
     
        </el-main>
      </el-container>
      <el-footer>Copyright © 2020 华辰智通科技有限公司</el-footer>
    </el-container>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import operatorSider from "./common/operatorSider"; //运营商侧边栏
import commonHeader from "./common/commonHeader"; //公共头部
import bus from "./common/bus";
export default {
  computed: {
    ...mapState({
      usertype: state => state.userData.type
    })
  },
  components: {
    operatorSider,
    commonHeader
  },
  data() {
    return {
      tagsList: [],
      collapse: false
    };
  },
  created() {
    bus.$on("collapse", msg => {
      this.collapse = msg;
    });

    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
    bus.$on("tags", msg => {
      let arr = [];
      for (let i = 0, len = msg.length; i < len; i++) {
        msg[i].name && arr.push(msg[i].name);
      }
      this.tagsList = arr;
    });
    console.log(this.usertype,  this.$route.path)
  }
};
</script>
<style lang="less">
.HomeContainer {
  // min-width: 1336px;
  width: 100%;
  height: 100vh;
  background: url(../../static/image/main_bg.png) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}

.el-header {
  // background: url(../../static/image/main_header.png) no-repeat;
  // background-size: 100% 100%;
  color: #333;
  text-align: center;
  height: 60px !important;
  position: relative;
  padding: 0 !important;
}
.el-footer {
  color: #159cb0;
  text-align: center;
  line-height: 50px;
  height: 50px !important;
}

.el-aside {
  text-align: center;
  margin-right: 10px;
  background: rgba(0, 41, 94, 0.8);
  box-shadow: 0px 0px 20px 0px rgba(68, 140, 232, 0.7) inset;
}

.el-main {
  background: rgba(0, 41, 94, 0.7);
  // box-shadow: 0px 0px 25px 0px rgba(68, 140, 232, 0.7) inset;
padding:  0;
  box-sizing: border-box;
}
.content {
  width: 100%;
  height: 100%;
}
.react {
  width: 100%;
  height: 100%;
  padding: 5px 0 0;
  box-sizing: border-box;
  background: linear-gradient(to left, #00e8ff, #00e8ff) left top no-repeat,
    linear-gradient(to bottom, #00e8ff, #00e8ff) left top no-repeat,
    linear-gradient(to left, #00e8ff, #00e8ff) right top no-repeat,
    linear-gradient(to bottom, #00e8ff, #00e8ff) right top no-repeat,
    linear-gradient(to left, #00e8ff, #00e8ff) left bottom no-repeat,
    linear-gradient(to bottom, #00e8ff, #00e8ff) left bottom no-repeat,
    linear-gradient(to left, #00e8ff, #00e8ff) right bottom no-repeat,
    linear-gradient(to left, #00e8ff, #00e8ff) right bottom no-repeat;
  background-size: 1px 10px, 10px 1px, 1px 10px, 10px 1px;
}
</style>